import { Breadcrumb } from 'antd';
import { FC } from 'react'
interface IRoute {
        path: string,
        name: string
}
interface IMatchesProps {
    matches: IRoute[]
}
// 声明接口的时候要注意，是校验组件属性上的整个对象还是单个 
const CrumbBase: FC<IMatchesProps> = ({matches}) => { // 注意这里 FC<组件属性上字段检查> 对应 props解构出来的{ matches}
    return (<>
        <Breadcrumb style={{ margin: '16px 0' }}>
        {
          matches.map((item:IRoute,key:number) => (
            <Breadcrumb.Item key={key}>{item.name}</Breadcrumb.Item>
          ))
        }
        </Breadcrumb>
    </>);
}
export default CrumbBase;
